<!doctype html>  
<head>
	<title>toggle css class with jQuery - by thePHP</title>
	<link rel="stylesheet" href="css/style.css" type="text/css" media="all">	
<style type=text/css media=all>
html {width:100%;height:100%;}
body {display: block;text-align: center;height: 100%;width: 100%;margin: 0 auto;}

.day {
	background: url(http://dl.dropbox.com/u/66101673/toggleclass/img/thelab_logo_black_small.png) center center no-repeat #FDBB30;
	width: 100%;
	height: 100%;
	}
		  
.night {
	background: url(http://dl.dropbox.com/u/66101673/toggleclass/img/thelab_logo_small.png) center center no-repeat black;
	width: 100%;
	height: 100%;
	}
 
 #button {
	font-family: sans-serif;
	font-weight: bold;
 	background-color: white;
 	color: #FDBB30;
 	padding: 1.2em;
 	border-radius: 1em;
 	text-decoration: none;
 	line-height: 2em;
 }
 
#button:hover {
        color: black;
	}
</style>	
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	
<script type="text/javascript">
$(function() {
	$( "#button" ).click(function(){
		$( "#selector" ).toggleClass( "day", "night", 1000 );
		$( "#selector" ).toggleClass( "night", "day", 1000 );
		return false;	
	});
});
</script>
	

	</script>
	
</head>

<body id="selector" class="day" >

<a href="#" id="button">click me</a>

</body>